<template>
  <div>
    <mt-header title="小智理财" ref='appHeader'></mt-header>
    <transition name='fade' mode="out-in" >
      <router-view :apprefs='$refs'/>
    </transition>
    <mt-tabbar v-model="selected" ref='appFooter' fixed>
      <mt-tab-item id="home">
        <img @click='changeHash' slot="icon" src="./assets/img/index.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="member">
        <img @click='changeHash' slot="icon" src="./assets/img/vip.png">
        会员
      </mt-tab-item>
      <mt-tab-item id="shopcar">
        <img @click='changeHash' slot="icon" src="./assets/img/shop.png">
        购物车
        <mt-badge type="error" size="small">{{butNum}}</mt-badge>
      </mt-tab-item>
      <mt-tab-item id="search">
        <img @click='changeHash' slot="icon" src="./assets/img/search.png">
        发现
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import Bus from './EventBus.js'
export default {
  created(){
    Bus.$on('addCarShopFn',data => {
      this.butNum += data
    })
  },
  data () {
    return {
      selected: '',
      butNum: 0
    }
  },
  methods: {
    changeHash () {
      this.$nextTick(function(){
        this.$router.push({
          name: this.selected
        })
      })
      // console.log(this.selected);
    }
  },
  watch: {
    // selected (newV, oldV) {
    //   this.$router.push({
    //     name: newV
    //   })
    // }
  }
}
</script>

<style>
body{
  margin: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
/* .fade-enter-active, .fade-leave-active{
    transition: all 0.3s;
}
.fade-enter, .fade-leave-to{
    transform: translate3d(100%, 0, 0)
} */
</style>
